.colour_red {
        background-color: rgb(255, 0, 0) !important;
}
.colour_green {
        background-color: rgb(0, 128, 0) !important;
}
.colour_blue {
        background-color: rgb(0, 64, 128) !important;
}
.colour_yellow {
        background-color: rgb(255, 255, 102) !important;
}
.colour_orange {
        background-color: rgb(255, 128, 0) !important;
}
.colour_purple {
        background-color: rgb(128, 0, 64) !important;
}
      
    /* Nav Container */
      
      nav{
        display:                -webkit-box;
        position:               relative;
        bottom:                 0;
        width:                  100%;
        border-top:             .05em solid rgba(255,255,255,.33);
        -webkit-box-shadow:     0 -0.05em 0 rgba(0,0,0,0.9);
        text-align:             center;
        z-index:                10000;
        height:                 50px;
        -webkit-box-orient:     horizontal;
        -webkit-box-align:      center;
        -webkit-box-pack:       justify;
        -webkit-box-sizing:     border-box;
        background-image:       -webkit-gradient(linear, left top, left bottom,     
                                    from(#000), to(#000), 
                                    color-stop(0.02, #545454), 
                                    color-stop(0.04, #3b3b3b), 
                                    color-stop(0.5, #1d1d1d), 
                                    color-stop(0.51, #000));
        font-family:            'Helvetica Neue', HelveticaNeue, Helvetica-Neue, Helvetica, sans-serif;
        text-align:             center;
        bottom:                 0px;
        left:                   0px;
        right:                  0px;
    }
      
    /* Nav item */
      
      a {
        text-decoration:        none;
        outline:                0;
        width:                  44px;
        height:                 44px;
        position:               relative;
        border-radius:          .25em;
        -webkit-border-radius:  .25em;
        display:                inline-block;
        vertical-align:         middle;
        padding:                1px 0 0 0;
        margin:                 3px 3px 3px 3px;
        display:                -webkit-box;
        -webkit-box-orient:     vertical !important;
        -webkit-box-sizing:     border-box;
        text-align:             center;
      }
      
      a > strong{
        position:               absolute;
        font-size:              .65em;
        color:                  #999;
        bottom:                 0;
        width:                  100%;
        text-align:             center;
        line-height:            1.5em;
        font-weight:            bold;
        -webkit-font-smoothing: antialiased;
      }

/* Images for eeach class of link */
      a.settings::before,
      a.settings:after {
        -webkit-mask-image:     url('../icons/settings.svg');
      }

      a.scheduled::before,
      a.scheduled::after {
        -webkit-mask-image:     url('../icons/eye.svg');
      }

      a.recorded::before,
      a.recorded::after {
        -webkit-mask-image:     url('../icons/film.svg');
      }

      a.guide::before,
      a.guide::after {
        -webkit-mask-image:     url('../icons/calendar.svg');
      }

      a.refresh::before,
      a.refresh::after {
        -webkit-mask-image:     url('../icons/refresh.svg');
      }

/* Rest of image manipulation css */
      a::after,
      a::before {
        position:               absolute;
        content:                " ";
        top:                    -1em;
        left:                   0;
        right:                  0;
        bottom:                 0;

        -webkit-mask-position:  center center;
        -webkit-mask-repeat:    no-repeat;
        zoom:                   .5; /* Scales to 50% Size - has better rendering than transform */
      }
      
      /* Grey Icon */

      a::before{
        background-image:       -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccc), to(#333));
        z-index:                1;
      }
      
      /* Icon Shadow */
      
      a::after{
        margin-top:             -.2em;
        background-color:       rgba(0,0,0,.75);
        z-index:                0;
      }
      
      /* Active Settings */
      
      a[selected~=true] {
        background-color:       rgba(255,255,255,.10);
      }
      
      a[selected~=true] > strong{
        color:                  #fff;
      }
      
      a[selected~=true]::before{
        background:             -webkit-gradient(linear, 38% 0%, 60% 70%, from(#DDE9F0), color-stop(0.6, #79B2EC), color-stop(0.7, #2E91E5), to(#3FC5F8));
      }
      
      a[selected~=true]::after{
        margin-top:             .2em;
      }
      a:hover{
        background-color:       rgba(255,255,255,.10);
      }
      
      a:hover > strong{
        color:                  #fff;
      }
      
      a:hover::before{
        background:             -webkit-gradient(linear, 38% 0%, 60% 70%, from(#DDE9F0), color-stop(0.6, #79B2EC), color-stop(0.7, #2E91E5), to(#3FC5F8));
      }
      
      a:hover::after{
        margin-top:             .1em;
      }


